<!--
 * @Author: lucky
 * @Date: 2021-06-30 15:54:16
 * @LastEditors: Mogy
 * @LastEditTime: 2021-07-03 19:46:49
 * @Description: 实名认证
-->
<template>
  <div>
    <div class="head">
      <van-nav-bar title="实名认证" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="tips">
      <van-image
        round
        width="7rem"
        height="7rem"
        src="https://img1.baidu.com/it/u=1928008449,1248211480&fm=26&fmt=auto&gp=0.jpg"
      />
      <h4>进行实名认证</h4>
      <span>用于保障账号的安全及快速接收订单信息</span>
    </div>
    <div class="information">
      <van-form validate-first>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          v-model="realname"
          name="pattern"
          label="真实姓名"
          placeholder="正则校验"
          :rules="[{ pattern, message: '请输入正确内容' }]"
        />
        <van-field
          v-model="idCard"
          name="pattern1"
          label="身份证号"
          placeholder="正则校验"
          :rules="[{ pattern1, message: '请输入正确内容' }]"
        />
        <van-field
          v-model="bankCard"
          name="pattern2"
          label="银行卡号"
          placeholder="正则校验"
          :rules="[{ pattern2, message: '请输入正确内容' }]"
        />
        <van-field name="uploader" label="身份证正面照">
          <template #input>
            <van-uploader :after-read="afterRead1" v-model="idcardPhotoPositive" max-count="1" />
          </template>
        </van-field>
        <van-field name="uploader" label="身份证反面照">
          <template #input>
            <van-uploader :after-read="afterRead2" v-model="idcardPhotoNegative" max-count="1" />
          </template>
        </van-field>
        <van-field name="uploader" label="银行卡照片">
          <template #input>
            <van-uploader :after-read="afterRead3" v-model="bankCardPhoto" max-count="1" />
          </template>
        </van-field>

        <div style="margin: 16px;">
          <van-button round block type="info" @click="toSubmit" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { submitCertificationApply } from "@/api/userDetails";
import { showFileURL, uploadFileURL } from "@/utils/config";
import axios from "axios";
import { getinfo } from "@/utils/auth";
export default {
  data() {
    return {
      realname: "",
      idCard: "",
      bankCard: "",
      pattern: "",
      pattern1: /\d{17}[\d|x]|\d{15}/,
      pattern2: /^([1-9]{1})(\d{14}|\d{18})$/,
      idcardPhotoPositive: [],
      idcardPhotoNegative: [],
      bankCardPhoto: [],
      // form:{
      //   realname:'',
      //   idCard:'',
      //   bankCard:'',
      //   idcardPhotoPositive:[],
      //   idcardPhotoNegative:[],
      //   bankCardPhoto:[],
      // },
    };
  },
  computed: {},
  methods: {
    // 返回按钮
    onClickLeft() {
      this.$router.push("/mine");
    },
    afterRead1(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      let data = new FormData();
      data.append("file", file.file);
      axios({
        url: uploadFileURL,
        method: "post",
        data: data,
      }).then((res) => {
        this.idcardPhotoPositive[0] = showFileURL + res.data.id;
      });
    },
    afterRead2(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      let data = new FormData();
      data.append("file", file.file);
      axios({
        url: uploadFileURL,
        method: "post",
        data: data,
      }).then((res) => {
        this.idcardPhotoNegative[0] = showFileURL + res.data.id;
      });
    },
    afterRead3(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      let data = new FormData();
      data.append("file", file.file);
      axios({
        url: uploadFileURL,
        method: "post",
        data: data,
      }).then((res) => {
        this.bankCardPhoto[0] = showFileURL + res.data.id;
      });
    },
    async toSubmit() {
      await submitCertificationApply({
        realname: this.realname,
        idCard: this.idCard,
        bankCard: this.bankCard,
        idcardPhotoPositive: this.idcardPhotoPositive[0],
        idcardPhotoNegative: this.idcardPhotoNegative[0],
        bankCardPhoto: this.bankCardPhoto[0],
        userId: getinfo(),
      });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style scoped>
.tips {
  margin: 20px;
  text-align: center;
}
</style>
